<template>
  <div>
    <h3>组件插槽</h3>
    <ul>
      <li>
        <span>张三</span>
        <MyButton>编辑</MyButton>
        <MyButton>删除</MyButton>
      </li>
    </ul>
    <MyButton>
      <svg
        t="1761708217494"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4697"
        width="26"
        height="26"
      >
        <path
          d="M212.194304 726.972416c33.760256 33.760256 73.08288 60.269568 116.876288 78.792704 45.357056 19.18464 93.518848 28.911616 143.147008 28.911616s97.788928-9.728 143.145984-28.911616c25.648128-10.848256 49.750016-24.457216 72.112128-40.63744l156.345344 156.484608c6.677504 6.683648 15.43168 10.025984 24.18688 10.025984 8.74496 0 17.490944-3.334144 24.1664-10.00448 13.35808-13.345792 13.36832-34.994176 0.021504-48.35328L739.03616 719.985664c30.533632-32.160768 54.736896-69.082112 71.99744-109.889536 19.183616-45.357056 28.911616-93.518848 28.911616-143.147008s-9.728-97.789952-28.911616-143.147008c-18.523136-43.792384-45.033472-83.115008-78.792704-116.876288-33.76128-33.760256-73.083904-60.270592-116.876288-78.793728-45.35808-19.18464-93.518848-28.911616-143.147008-28.911616s-97.789952 9.728-143.147008 28.911616c-43.793408 18.523136-83.116032 45.033472-116.876288 78.793728s-60.269568 73.083904-78.792704 116.876288c-19.183616 45.357056-28.911616 93.518848-28.911616 143.147008s9.728 97.789952 28.911616 143.147008C151.923712 653.888512 178.434048 693.21216 212.194304 726.972416zM260.547584 255.279104c56.539136-56.539136 131.710976-87.676928 211.670016-87.676928 79.958016 0 155.13088 31.137792 211.670016 87.676928s87.675904 131.710976 87.675904 211.670016S740.425728 622.08 683.887616 678.619136c-56.539136 56.539136-131.712 87.676928-211.670016 87.676928-79.95904 0-155.13088-31.136768-211.670016-87.675904s-87.675904-131.712-87.675904-211.670016S204.008448 311.81824 260.547584 255.279104z"
          fill="#272636"
          p-id="4698"
        ></path>
      </svg>
    </MyButton>
    <MyButton>
      <img
        src="https://img.alicdn.com/imgextra/i1/780808146/O1CN01L499sa2A2v8aNHCwR_!!780808146.jpg"
        alt=""
        srcset=""
        style="width: 20px"
      />
    </MyButton>
    <hr />
    <MyCard>
      <template v-slot:header>
        <h3>标题</h3>
      </template>
      <!-- <template #body>
        <div>内容</div>
        <div>内容</div>
        <div>内容</div>
        <div>内容</div>
      </template> -->
      <!-- 插槽默认是存在名称得，默认名称default -->
      <template #default>
        <div>内容</div>
        <div>内容</div>
        <div>内容</div>
        <div>内容</div>
      </template>
      <template #footer>
        <input type="button" value="脚注" />
      </template>
    </MyCard>

    <hr />

    <MyList :list="addrs">
      <!-- 
        在组件中将需要传递给插槽标签使用得数据，通过 v-bind 绑定在对应得 <slot> 组件上；
        在组件得插槽标签上，可以用过 v-slot 接收传递得 对象 数据，此时在插槽标签上通过vue语法进行使用
      -->
      <template v-slot:default="obj">
        <div class="list-box">
          <div class="title">
            <svg viewBox="0 0 1024 1024" width="16" height="16">
              <path
                d="M832 389.3c-0.5 49.1-16.2 94.1-37.5 137.4-31.8 65-74 123-119.8 178.6-42.6 51.7-88.5 100.6-137.4 146.4-17.1 16-32.7 16.5-50.2 0.8-90.6-81.4-172.1-170.6-234.3-276.1-10.1-17.2-19.3-34.9-27.2-53.2-7.5-17.4-1-35.5 15.1-43 16.2-7.5 33.9-0.9 41.8 16.2 37.2 80.8 90.6 149.5 150 214.6 22.9 25.1 46.9 50.2 71.8 73.4 3.1 2.9 9 4.2 13.4-0.2 82.4-83 158.5-170 214.6-273.6C748.6 480.5 768 425.9 768 389c0-52.3-5.7-75.5-30.3-121-46.8-86.5-119.2-140-218.7-140-113.1 0-213.4 69.6-249 177.3-8.9 27.1-13.6 54.8-14 83.3-0.3 20.4-13.7 34.7-32.1 34.7-18.5 0-32-14.8-31.9-34.8 0.4-151.5 104.8-282.8 252-316.8C565.8 43.6 696.2 94.1 769.9 198c40.7 57.3 60.9 121.2 62.1 191.3z"
                p-id="5178"
              ></path>
              <path
                d="M512.5 256c-70.9-0.1-128.5 57.2-128.5 128 0 70.3 57.3 127.9 127.5 128 70.8 0.2 128.5-57.3 128.5-128 0-70.4-57.3-127.9-127.5-128z m0.6 192c-36 0.3-65.2-28.4-65.1-64.1 0.1-35.3 28.8-63.9 64.4-63.9 34.7 0 63.5 28.7 63.6 63.6 0.1 34.9-28.3 64.1-62.9 64.4zM960 928v-0.4-1-0.6c0-0.4 0-0.7-0.1-1.1 0-0.2 0-0.4-0.1-0.5 0-0.3-0.1-0.6-0.1-1 0-0.2-0.1-0.4-0.1-0.7 0-0.2-0.1-0.5-0.1-0.7-0.1-0.3-0.1-0.6-0.2-1 0-0.1 0-0.2-0.1-0.3-0.9-3.9-2.4-7.5-4.6-10.7L827 689.3c-8.6-14.9-27.8-20-42.6-11.4l-1.4 0.8c-14.9 8.6-20 27.8-11.4 42.6L872.5 896h-721l100.3-173.7c8.8-15.2 3.5-34.9-11.7-43.7-15.2-8.8-34.9-3.5-43.7 11.7L68.3 912c-1.2 2.1-2.1 4.2-2.8 6.5v0.1c-0.1 0.4-0.3 0.9-0.4 1.3 0 0.1-0.1 0.3-0.1 0.4-0.1 0.3-0.2 0.7-0.2 1 0 0.2-0.1 0.5-0.1 0.7 0 0.2-0.1 0.5-0.1 0.7-0.1 0.3-0.1 0.7-0.1 1 0 0.2 0 0.3-0.1 0.5 0 0.4-0.1 0.8-0.1 1.2v0.2c-0.1 0.8-0.1 1.5-0.1 2.3 0 4.4 0.9 8.7 2.6 12.5 2.6 6.2 7.2 11.6 13.4 15.2 4.5 2.6 9.4 4 14.2 4.2h833.8c16.8 0 30.7-13.2 31.9-29.7v-0.2-1-0.7c-0.1 0-0.1-0.1-0.1-0.2z"
                p-id="5179"
              ></path>
            </svg>
            <!-- <span>{{ obj }}</span> -->
            <!-- <span>{{ addrs[obj.index] }}</span> -->
            <span>{{ obj.item }}</span>
          </div>
          <input type="button" value="X" @click="removeItem(obj.index)" />
        </div>
      </template>
    </MyList>
  </div>
</template>

<script>
import MyButton from "./MyButton";
import MyCard from "./MyCard";
import MyList from "./MyList";
export default {
  components: {
    MyButton,
    MyCard,
    MyList,
  },
  data() {
    return {
      addrs: ["Doral", "熊州市", "潘徽市", "海 绍齐海市"],
    };
  },
  methods: {
    removeItem(i) {
      this.addrs.splice(i, 1);
    },
  },
};
</script>

<style scoped>
.list-box {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
</style>
